<template>
  <div class="add-plan-root">
    <el-form :model="planForm" :rules="planFormRules" ref="planForm" label-width="80px" class="bjs-form" style="width: 100%;">

      <el-form-item label="标题" prop="title">
        <el-input class="bjs-input" v-model="planForm.title" maxlength="35"></el-input>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input class="bjs-input" v-model="planForm.content"></el-input>
      </el-form-item>

      <el-form-item label="时间" required>
        <el-col :span="12">
          <el-form-item prop="day" style="margin-bottom: 0">
            <el-date-picker class="bjs-input" value-format="yyyy-MM-dd" v-model="planForm.day" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="time" style="margin-bottom: 0">
            <el-time-picker class="bjs-input" value-format="HH:mm" v-model="planForm.time"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="类型">
        <el-col :span="7">
          <el-switch
            class="bjs-switch"
            v-model="planForm.allDay"
            inactive-text="全天" active-value="Y" inactive-value="N"
          ></el-switch>
        </el-col>
        <el-col :span="7">
          <el-switch
            class="bjs-switch"
            v-model="planForm.repeat"
            inactive-text="重复" active-value="Y" inactive-value="N"
          ></el-switch>
        </el-col>
        <el-col :span="10">
          <el-input-number
            class="bjs-input bjs-input-number"
            controls-position="right"
            v-model="planForm.repeatDay"
            :min="1" :max="7"
            :disabled="planForm.repeat === 'N'"
          ></el-input-number>
        </el-col>
      </el-form-item>

      <el-form-item label="背景色" prop="bg">
        <el-radio-group size="mini" v-model="planForm.bg" >
          <el-radio-button class="bjs-radio bgc-gray"   label="gray"  >{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
          <el-radio-button class="bjs-radio bgc-red"    label="red"   >{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
          <el-radio-button class="bjs-radio bgc-yellow" label="yellow">{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
          <el-radio-button class="bjs-radio bgc-blue"   label="blue"  >{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
          <el-radio-button class="bjs-radio bgc-greey"  label="greey" >{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
          <el-radio-button class="bjs-radio bgc-brown"  label="brown" >{{planForm.title === '' ? '标题示例':planForm.title}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-button-group style="margin-top: 10px;">
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="addPlan()">保存</el-button>
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="resetForm()">重置</el-button>
    </el-button-group>
  </div>
</template>

<script>
  import { postPlan } from '../../../api/plan'
  export default {
    name: "addPlan",
    data () {
      return {
        planForm: {
          title:'',
          content:'',
          type:'LINE',
          allDay: 'Y',
          repeat: 'N',
          repeatDay: 0,
          day: '',
          time: '',
          bg:''
        },
        planFormRules: {
          title: [{required: true, message: '请输入标题', trigger: 'blur' },],
          day:   [{required: true, message: '请选择日期', trigger: 'change' }],
          time:  [{required: true, message: '请选择时间', trigger: 'change' }],
          bg:    [{required: true, message: '请选择背景', trigger: 'change' }]
        }
      }
    },
    methods: {
      addPlan () {
        this.$refs['planForm'].validate((valid) => {
          if (valid) {
            postPlan(this.planForm).then(() => {
              this.$bjsNotify.success('计划新增成功')
              if (this.planCard === 'N') {
                this.$emit('findPlanLine');
              } else {
                this.$emit('findPlanLines');
              }
            })
          }
        })
      },
      resetForm () {
        this.$refs['planForm'].resetFields();
        this.planForm.allDay = 'Y'
        this.planForm.repeat = 'N'
        this.planForm.repeatDay = 0
      },
      init (date) {
        this.planForm.day = date
      }
    }
  }
</script>

<style scoped lang="scss">

  .bjs-form {
    /deep/  .el-form-item {
      margin-bottom: 20px;
    }
  }

  .add-plan-root {
    @include flex(column,center,center);
    @include boxBase(100%,100%);
  }

  .bgc-gray   {/deep/ .el-radio-button__inner {background-color: rgba(133,133,133,0.3) !important;} }
  .bgc-red    {/deep/ .el-radio-button__inner {background-color: rgba(255,0,55,0.4) !important;} }
  .bgc-yellow {/deep/ .el-radio-button__inner {background-color: rgba(255,195,0,0.5) !important;} }
  .bgc-blue   {/deep/ .el-radio-button__inner {background-color: rgba(0,194,242,0.5) !important;}}
  .bgc-greey  {/deep/ .el-radio-button__inner {background-color: rgba(112,242,46,0.5) !important;} }
  .bgc-brown  {/deep/ .el-radio-button__inner {background-color: rgba(242,175,98,0.5) !important;} }

  .bjs-radio {
    /deep/ .el-radio-button__inner {
      padding: 7px 11px;
      [data-theme="light"] & {color: #454545;}
      [data-theme="night"] & {color: #c2c2c2;}
    }
    /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: #ffffff !important;
    }
  }

</style>

